<template>
  <el-popover popper-class="user-setting" placement="right-start" :width="120" trigger="click">
    <div class="us-item pointer">
      <span>{{ loginInfo.username || 'unknow' }}</span>
    </div>
    <router-link class="us-item pointer" to="/userManagement">
      <el-icon class="el-icon-user f22">
        <IconEpUser />
      </el-icon>
      <span class="ml12">用户管理</span>
    </router-link>
    <div class="us-item pointer">
      <IconExit />
      <el-popconfirm
        title="确认退出？"
        confirm-button-text="确定"
        cancel-button-text="取消"
        confirm-button-type="primary"
        cancel-button-type="text"
        @confirm="handleSignOut"
      >
        <template #reference>
          <span class="ml12">退出登录</span>
        </template>
      </el-popconfirm>
    </div>

    <template #reference>
      <slot name="reference"></slot>
    </template>
  </el-popover>
</template>

<script setup lang="ts">
const loginInfo = {}

const handleSignOut = () => {
  console.log('handleSignOut')
}
</script>

<style scoped lang="less">
.user-setting {
  .us-item {
    display: flex;
    align-items: center;
    padding: 8px 14px;
    color: rgb(64, 64, 64);

    .el-icon-user,
    .icon-exit {
      width: 24px;
    }

    .icon-exit {
      svg {
        display: block;
      }
    }
    &:hover {
      background-color: rgba(0, 0, 0, 0.04);
    }
  }
}
</style>
